<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .box {
            width: 730px;
            height: 454px;
            padding: 8px;
            border: 1px solid green;
            margin: 100px auto;
        }

        .inner {
            position: relative;
            overflow: hidden;
            height: 454px;
        }

        #imglist {
            width: 700%;
            position: absolute;
            left: 0;
            transition: left 300ms linear;
        }

        li {
            float: left;
        }

        .list {
            position: absolute;
            bottom: 20px;
            left: 50%;
            margin-left: -85px;
        }

        .list i {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: #fff;
            color: #333;
            float: left;
            font-style: normal;
            line-height: 20px;
            font-size: 14px;
            text-align: center;
            margin-right: 10px;
            cursor: pointer;
        }

        .list i:last-child {
            margin-right: 0;
        }

        .list i.current {
            background-color: skyblue;
            color: #fff;
        }

        .arrow {
            position: absolute;
            width: 100%;
            top: 50%;
            margin-top: -30px;
        }

        .arrow-left,
        .arrow-right {
            width: 30px;
            height: 60px;
            position: absolute;
            font: 20px/60px "consolas";
            color: #fff;
            background-color: rgba(0, 0, 0, .3);
            text-align: center;
            cursor: pointer;
        }

        .arrow-right {
            right: 0;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <div class="inner" id="inner">
            <ul id="imglist">
                <li><a href="#"><img src="images/1.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/2.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/3.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/4.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/5.jpg" alt=""></a></li>
                <li><a href="#"><img src="images/6.jpg" alt=""></a></li>
            </ul>
            <div class="list">
                <i class="current">1</i>
                <i>2</i>
                <i>3</i>
                <i>4</i>
                <i>5</i>
                <i>6</i>
            </div>
            <div class="arrow">
                <span class="arrow-left">&lt;</span>
                <span class="arrow-right">&gt;</span>
            </div>
        </div>
    </div>
</body>
<script>
    // <!-- 獲取元素 註冊事件 首先實現點擊序號切換圖片 -->
    window.onload = function () {
        let listBtn = document.querySelectorAll('i');
        // 獲取圖片
        let ul = document.querySelector('#imglist');
        let imgs = document.querySelectorAll('img');
        // 定義圖片移動距離 點擊下一張圖片向左移動
        let imgsWidth = imgs[0].offsetWidth;
        // console.log(imgsWidth);
        listBtn.forEach(function (e, i) {
            e.onmouseover = function () {
                // 圖片寬度 * 按鈕索引 * -1 向左移動
                let dis = imgsWidth * i * - 1;
                ul.style.left = dis + 'px';
            }
        })
        // 封裝函數 
        function cutImg() {
            // 判斷如果是最後一張就返回第一張
            if (currentIndex == imgs.length - 1) {
                currentIndex = - 1;
            }
            // 點擊下一張後 索引 ++ ;
            currentIndex++;
            let dis = imgsWidth * currentIndex * -1;
            ul.style.left = dis + 'px';

            // 點擊下一張的時候小標點也要跟著對應跳轉
            listBtn.forEach(function (e) {
                e.classList.remove('current');
            })
            listBtn[currentIndex].classList.add('current');
        }
        // 點擊按鈕 切換下一張圖片
        // 獲取按鈕
        let rightBtn = document.querySelector('.arrow-right');
        // 定義當前為第一張圖片
        let currentIndex = 0;
        rightBtn.onclick = function () {
            // 調用函數
            cutImg();
        }
        // 點擊上一張按鈕 圖片向右移動
        let leftBtn = document.querySelector('.arrow-left');
        leftBtn.onclick = function () {
            // 如果當前圖片為第一張  點擊的時候變成最後一張
            if (currentIndex === 0) {
                currentIndex = imgs.length;
            }
            currentIndex--;
            let dis = imgsWidth * currentIndex * - 1;
            ul.style.left = dis + 'px';
            listBtn.forEach(function (e) {
                e.classList.remove('current');
            })
            listBtn[currentIndex].classList.add('current');
        }
        // 自動播放
        let timer = setInterval(function () {
            cutImg();
        }, 3000);
        // 鼠標懸停在輪播圖上的時候輪播停止
        ul.onmouseover = function () {
            clearInterval(timer);
        }
        // 鼠標移除 輪播繼續
        ul.onmouseout = function () {
            timer = setInterval(function () {
                cutImg();
            }, 3000);
        }
    }    
</script>

</html>